<template>
    <div class="paddB60">

        <div class="operatBtnWrapper">
            <button class="operatBtn marR5" @click.stop="showAddProAnalyDialog">新增立项分析</button>
		</div>

        <div class="tableWrapper1 paddLR20 proAnalyWrapper">
            <el-table
                @row-click = "routerToGanttPage"
                @sort-change="sortChange"
                border
                tooltip-effect = "light"
                :data="tableData"
                style="width: 100%">
                <el-table-column type="expand" show-overflow-tooltip>
                    <template slot-scope="props">
                        <el-form label-position="left" class="demo-table-expand" v-if = "props.row.pro_groups.length > 0">
                            <!-- <div  v-for = "(item,index) of props.row.pro_groups" :key = "item.id"> -->
                            <div  v-for = "item of props.row.pro_groups" :key = "item.id">
                                <el-form-item label="项目组名称：">
                                    <span class="marR15">{{item.pro_group_name}}</span>
                                    <span title="修改"  style="cursor:pointer;" class="marR15">
                                        <icon name="edit2" class="scaleIcon1 svgColor" @click.native.stop="showAddOneProGroupDialog(props.row,index,'修改项目组',props)"></icon>
                                    </span>
                                    <!-- <span title="取消" class="marR15"  style="cursor:pointer;">
                                        <icon name="reduce" class="scaleIcon1 svgColor" @click.native.stop="showCancelProAnalyDialog(scope.row.id,scope.$index)"></icon>
                                    </span> -->
                                </el-form-item>
                                <!-- <el-form-item label="项目经理：">
                                    <span>{{ item.pro_liable_user !== null ? item.pro_liable_user.user_name : '/'}}</span>
                                </el-form-item>
                                <el-form-item label="产品经理：">
                                    <span>{{ item.product_manager_user !== null ? item.product_manager_user.user_name : '/'}}</span>
                                </el-form-item> -->
                                <el-form-item label="人员：">
                                    <span v-for = "item1 of item.pro_group_users" :key = "item1.id">
                                        <template v-if = "item1.pro_users !== null">
                                            <span v-if = "item1.user_type === 1">{{item1.pro_users.user_name + '(项目经理)'}},</span>
                                            <span v-else-if="item1.user_type === 2">{{item1.pro_users.user_name + '(产品经理)'}},</span>
                                            <span v-else-if="item1.user_type === 3">{{ item1.pro_users.user_name}},</span>
                                            <span v-else-if="item1.user_type === 4">{{ item1.pro_users.user_name + '(项目经理,产品经理)'}},</span>
                                        </template>
                                    </span>
                                    <span v-if = "item.pro_group_users.length <= 0">/</span>
                                </el-form-item>
                                <el-form-item label="状态：">
                                    <span>
                                        {{ item.is_diss === 2 ? '已解散' : '/'}}
                                    </span>
                                </el-form-item>
                                <el-form-item label="解散原因：">
                                    <span>
                                        {{ item.reason !== null ? item.reason : '/'}}
                                    </span>
                                </el-form-item>
                                <hr />
                            </div>
                        </el-form>
                        <p v-else class="tipNoData">暂无数据</p>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                sortable = 'custom'
                label="立项分析编号"
                prop="pro_analy_num">
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                sortable = 'custom'
                label="名称"
                prop="pro_analy_name">
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                sortable = 'custom'
                label="需求开始时间"
                prop="start_time">
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                sortable = 'custom'
                label="新建人"
                prop="create_user_id">
                    <template slot-scope="scope">
                        {{scope.row.create_user.user_name}}
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                sortable = 'custom'
                label="状态"
                prop="statu">
                    <template slot-scope="scope">
                        <span v-if = "scope.row.statu === 1">进行中</span>
                        <span v-else-if = "scope.row.statu === 2">完成</span>
                        <span v-else-if = "scope.row.statu === 3">暂停</span>
                        <span v-else-if = "scope.row.statu === 4">取消</span>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                sortable = 'custom'
                label="完成时间">
                    <template slot-scope="scope">
                        {{scope.row.sure_time !== null ? scope.row.sure_time : '/'}}
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                label="取消原因"
                prop="cancel_reason">
                <template slot-scope="scope">
                    {{scope.row.cancel_reason ? scope.row.cancel_reason : '/'}}
                </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                label="取消审核结果"
                prop="examine_result">
                    <template slot-scope="scope">
                        <template v-if = "scope.row.examine_result === null">
                            /
                        </template>
                        <template v-else-if = "scope.row.examine_result === 1">
                            待审核
                        </template>
                        <template v-else-if = "scope.row.examine_result === 2">
                            审核通过
                        </template>
                        <template v-else-if = "scope.row.examine_result === 3">
                            审核不通过
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                label="审核人">
                    <template slot-scope="scope">
                        <template v-if = "scope.row.pro_analy_audit.length <= 0">
                            /
                        </template>
                        <template v-else v-for = "item of scope.row.pro_analy_audit">
                            <span :key="item.user.id" :title="item.user.user_name + '(' + (item.audit_status === 1 ? '未审核' : '已审核') + ')'">{{item.user.user_name}}({{item.audit_status === 1 ? '未审核' : '已审核'}})</span>,
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                label="审核类型">
                    <template slot-scope="scope">
                        <template v-if = "scope.row.audit_type === null">/</template>
                        <template v-else-if  = "scope.row.audit_type === 1">需全部审核人员审核</template>
                        <template v-else-if  = "scope.row.audit_type === 2">至少需一人审核</template>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                label="审核原因">
                     <template slot-scope="scope">
                         {{scope.row.examine_reason !== null ? scope.row.examine_reason : '/'}}
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                label="暂停原因">
                    <template slot-scope="scope">
                         {{scope.row.stop_reason !== null ? scope.row.stop_reason : '/'}}
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                show-overflow-tooltip
                label="资料路径"
                prop="cancel_reason">
                <template slot-scope="scope">
                    <div v-if = "scope && scope.row && scope.row.pro_analy_files && scope.row.pro_analy_files.length > 0">
                        <el-popover
                             v-if = "scope.row.pro_analy_files.length > 0"
                            placement="top-start"
                            width="200"
                            trigger="hover">
                            <el-table
                                tooltip-effect="light"
                                border
                                size = "mini"
                                :data="scope.row.pro_analy_files"
                                style="width: 100%">
                                <el-table-column
                                    prop="file_url"
                                    show-overflow-tooltip
                                    label="资料路径">
                                </el-table-column>
                                <el-table-column
                                    show-overflow-tooltip
                                    label="上传人">
                                    <template slot-scope="scope1">
                                        {{scope1.row.user.user_name}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="submit_time"
                                    show-overflow-tooltip
                                    label="上传时间">
                                </el-table-column>
                            </el-table>
                            <!-- <p  v-for = "item of scope.row.pro_analy_files" :key = "item.id" class="ellipsis" :title="item.file_url">
                                {{item.file_url}}
                            </p> -->
                            <span title="查看"  style="cursor:pointer;" slot="reference">查看</span>
                        </el-popover>
                    </div>
                    <div v-else>/</div>
                </template>
                </el-table-column>
                <el-table-column
                align="center"
                label="操作">
                <template slot-scope="scope">
                    <div v-if = "scope.row.statu !== 4">
                        <span title="新增项目组"  style="cursor:pointer;" class="marR15" v-if = "scope.row.pro_groups.length <= 0"><icon name="add" class="scaleIcon1 svgColor" @click.native.stop="showAddOneProGroupDialog(scope.row,scope.$index,'新增项目组')"></icon></span>
                       <span title="修改"  style="cursor:pointer;" class="marR15"><icon name="change" class="scaleIcon1" @click.native.stop="showEditProAnalyDialog(scope.row,scope.$index)"></icon></span>
                       <span title="审核" class="marR15"  style="cursor:pointer;" v-if = "scope.row.examine_result === 1 && scope.row.pro_analy_audit.filter(val => val.audit_status === 1 && val.audit_user_id === parseInt(getLoginUserId)).length > 0"><icon name="examine" class="scaleIcon1 svgColor" @click.native.stop="showExamineProAnalyDialog(scope.row.id,scope.$index,scope.row.audit_type,)"></icon></span>
                    </div>
                    <div v-else>/</div>
                </template>
                </el-table-column>
            </el-table>
        </div>
        
        <div class="rightPageWripper" v-if="tableData.length > 0">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="serverPage.currPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="serverPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="serverPage.totalSize">
            </el-pagination>
        </div>

        <!-- 新增立项分析弹框组件 -->
        <add-pro-analy-dialog :dialogTitle = "title" :dialogVisible = "dialogVisible"  @hideAddProAnalyDialog = "hideAddProAnalyDialog"></add-pro-analy-dialog>
  
        <edit-pro-analy-dialog :currRowRecord = "currRowRecord" :dialogVisible = "editDialogVisible" @hideEditProAnalyDialog = "hideEditProAnalyDialog"></edit-pro-analy-dialog>
        
        <!-- 审核立项分析弹框 -->
        <examine-dialog :currRowRecord = "currExamiRowRecord" :isExamineDialogVisible = "isExamineDialogVisible" @hideExamineDialogVisible = "hideExamineDialogVisible"></examine-dialog>

        <!-- 新增 / 修改项目组 -->
        <add-one-pro-group :proAnalyId = "currProAnalyId" :currProGroupObj = "currProGroupObj" :title="title" :isAddProGroupDiaVisible = "addOneProGroupDialogVisible" :userList = 'userList' @hideAddOneProGroupDialog = "hideAddOneProGroupDialog"></add-one-pro-group>

    </div>
</template>

<script>
import http from '@/assets/js/http'
import _g from '@/assets/js/global'
import addProAnalyDialog from './component/addProAnalyDialog'
import addOneProGroup from './component/addOneProGroup'
import editProAnalyDialog from './component/editProAnaly'
import examineDialog from './component/examineDialog'
import { mapGetters } from 'vuex'

export default {
    components: {
        addProAnalyDialog,
        editProAnalyDialog,
        examineDialog,
        addOneProGroup
    },
    mixins: [http],
    data(){
        return{

            userList : [],

            /* 修改项目组弹框默认隐藏 */
            addOneProGroupDialogVisible : false,
            currProGroupObj : null,//   当前项目组信息

            currProAnalyId : null,//    当前立项分析id

            currRowRecord : null,// 当前行数据
            currExamiRowRecord : null,// 当前待审核行的数据

            /* 审核立项分析弹框默认隐藏 */
            isExamineDialogVisible : false,

            /* 修改立项分析 */
            editDialogVisible : false,//  默认隐藏

            /* 新增 / 编辑立项分析弹框 */
            title : '新增立项分析',
            dialogVisible : false,//    默认隐藏


            // 立项分析列表
            tableData: [],
            serverPage:{                                                                                              //  后台分页                                    
                pageSize:10,                 //  每页显示10个
                totalSize:0,                 //  总记录数
                currPage:1,                    //  当前页码 
            },  
            sortType:'ascending',                        // ascending升序，descending降序
            sortIdent : 'pro_analy_num',//  排序字段，默认根据立项分析名称排序
        }
    },
    created() {
        this.getProAnalyList()
    },
    computed: {
    ...mapGetters([                                                                         //  用户权限
      'getRoles', 'getLoginUserId', 'getStaffNum'
    ])
  },
    methods: {
        /* 跳转到甘特图 */
        routerToGanttPage(row, column, event){
            const proAnalyId = row.id
            this.$router.push({
                path : '/admin/proAnaly/proAnalyGantt',
                query : {proAnalyId}
            })
        },
        /* 手动排序 */
        sortChange(column, prop, order) {
            if(column.order !== null){
                this.sortType = column.order
                this.sortIdent = column.prop
                this.getProAnalyList()
            }
        },
        handleSizeChange(){
            this.getProAnalyList()
        },
        handleCurrentChange(){
            this.getProAnalyList()
        },
        /* 分页获取所有立项分析 */
        getProAnalyList(){
            const that = this
            let tableData = []           //  显示的立项分析表格数据    
            const sortType = that.sortType //   //  ascending升序，descending降序   
            const sortIdent = that.sortIdent 
            const data = {
                pageSize:that.serverPage.pageSize,
                currPage:that.serverPage.currPage,
                sortIdent,
                sortType
            }

            _g.showLoading('加载中');
            that.apiPost("admin/task/getProAnalyList",data).then(res => {
                _g.showLoading().close()
                if(typeof res === 'string'){
                    res = JSON.parse(res)
                }
                if (res.code != 200) {
                    this.handleError(res)
                } else {
                    that.tableData = res.data.proAnalyList.data
console.log('that.tableData = ',that.tableData)
                    that.serverPage.totalSize = res.data.total
                    that.serverPage.currShowSize = res.data.per_page
                }
            })
        },

        /* 显示新增立项分析弹框 */
        showAddProAnalyDialog() {
            this.title = '新增立项分析'
            this.dialogVisible = true
        },
        /* 隐藏新增立项分析弹框 */
        hideAddProAnalyDialog(str) {
            this.dialogVisible = false
            if(str === '新增立项分析成功'){
                this.getProAnalyList()
            }
        },
        /* 显示取消立项分析弹框 */
        showCancelProAnalyDialog(proAnalyId,index){
            this.currCancelRowRecord = {
                index,
                proAnalyId
            }
            this.calcelDialogVisible = true
        },
         /* 显示修改立项分析弹框 */
        showEditProAnalyDialog(row,index){
            let currRowRecord = JSON.parse(JSON.stringify(row))
            currRowRecord['index'] = index
            this.currRowRecord = currRowRecord
            this.editDialogVisible = true
            // this.getAllNotLeaveUsersMsg('修改立项分析')
        },
        /* 隐藏修改立项分析弹框 */
        hideEditProAnalyDialog(str,index) {
            this.editDialogVisible = false
            this.currRowRecord = null

            if(str === '更新立项分析成功'){
                this.getProAnalyList()
            }
        },
        /* 显示审核立项分析弹框 */
        showExamineProAnalyDialog(proAnalyId,index,auditType){
            let currRowRecord = {
                proAnalyId,
                index,
                auditType
            }

            this.currExamiRowRecord = currRowRecord
            this.isExamineDialogVisible = true
        },
         /* 隐藏审核立项分析弹框 */
        hideExamineDialogVisible(){
            this.currExamiRowRecord = null
            this.isExamineDialogVisible = false
            this.getProAnalyList()
        },
        /* 获取所有未离职人员的信息(包含组织架构信息) */
        getAllNotLeaveUsersMsg(str){
            const that = this
            let currRowRecord = that.currRowRecord
            // let  incumList = []

             _g.showLoading('加载中')
                that.apiPost('admin/users/getAllNotLeaveUsersMsg').then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                    res = JSON.parse(res)
                    }
                if (res.code != 200) {
                    that.handleError(res)
                } else {
                    if(res.data.isSuccess === 0){             //  成功
                        if(res.data.incumList.length <= 0){
                            _g.toastMsg('warning','暂无在职人员!')
                        }else{
                            if(str === '修改项目组' || '新增项目组'){
                                that.addOneProGroupDialogVisible = true
                                that.userList = res.data.incumList
                            }
                        }
                    }else{
                        _g.toastMsg("error", res.message)
                    }
                }
            })
        },
        /* 显示修改项目组弹框 */
        showAddOneProGroupDialog(row,index,str,props){
            if(str === '修改项目组'){
                let currProGroupObj = JSON.parse(JSON.stringify(row.pro_groups[0]))
                this.currProGroupObj = currProGroupObj
            }else if(str === '新增项目组'){
                this.currProAnalyId = row.id//  获取所属立项分析id
            }
            
            this.title = str
            this.getAllNotLeaveUsersMsg(str)
        },
        /* 隐藏修改项目组弹框 */
        hideAddOneProGroupDialog(str,index) {
            this.addOneProGroupDialogVisible = false
            this.currProGroupObj = null
            this.userList = []

            if(str === '修改项目组'){
                this.currProGroupObj = null
                this.userList = []
            }else if(str === '新增项目组'){
                this.currProAnalyId = null
            }
            this.getProAnalyList()
        },
    },
}
</script>

<style scoped>

</style>
